<template>
  <div class="detail_wapper">
    <div class="cp_desc">
      <div>
        <div class="close_and_up">
          <div style="width: 45%; display: flex; justify-content: space-between">
            <span class="close_and_up_span">股池详情</span>
          </div>
        </div>
        <div :class="{ cp_desc_content: isClose }" class="cp_desc_content_open" v-html="staticData.cpDescribe">
        </div>
      </div>
    </div>
    <!-- 股票池 -->
    <div class="cp_chi_cang" v-if="!isValueGrow">
      <div class="tp_chi_cang_history">
        <div>
          <div class="industry_layout_tips">股票池</div>
        </div>
      </div>
      <!-- 日历组件 -->
      <div class="calendar_prop">
        <hxm-calendar :dateArr="dateList" @confirm="selectDate"> </hxm-calendar>
      </div>
      <div v-if="stockList.length">
        <ActiveCP :myList="stockList" />
        <div class="to_history">
          <div @click="toHistoryPage" v-if="!isValueGrow">
            <span v-if="isGetDate">成功案例</span>
            <span v-else>持仓记录</span>
            <span class="history_success_image"></span>
          </div>
        </div>
      </div>
      <div v-else>
        <NoData />
      </div>
    </div>
    <!-- 价值成长股票池 -->
    <div class="table_wrapper" v-else>
      <div class="industry_layout_tips">股票池</div>
      <div class="calendar_prop_re">
        <div @click="visibleHandle()" class="value_grow_content">
          <div class="calendar_icon_dark"></div>
          <span class="demo-btn card-bg">{{ nowDate }}</span>
          <hxm-picker-wheel
            @confirm="pickItem"
            :visible.sync="visible"
            :value.sync="nowDate"
            :data="dateList"
          >
            <template v-slot:option="{ option }">
              <span class="option">{{ option }}</span>
            </template>
          </hxm-picker-wheel>
        </div>
      </div>
      <div :class="detailTableData.length > 6 ? table_scroll_wrapper : table_scroll_wrapper_auto">
        <TableProp :detailTableData="detailTableData" />
        <div v-show="isValueGrow">
          <stock-list
            :list="detailTableData"
            stockTag="heavy"
            unit="rem"
            fixed="left"
            :expand="false"
            :fixedHead="false"
            @headSort="watchHeadSort"
            @clickRow="watchClickRow"
          >
            <stock-list-item
              prop="stockCode"
              label="股票名称"
              label-width="1.7rem"
              label-align="left"
            >
              <tempalte v-slot="scope">
                <div class="stock_detail_template">
                  <div v-if="scope.stockName">{{ scope.stockName }}</div>
                  <div v-else>--</div>
                  <div>{{ scope.stockCode }}</div>
                </div>
              </tempalte>
            </stock-list-item>
            <stock-list-item
              prop="buyPrice"
              label="调入价格"
              sortable="true"
              label-width="1.6rem"
              label-align="right"
            >
              <tempalte v-slot="scope">
                <div class="table_in_template">
                  <div v-if="scope.buyPrice">
                    {{ scope.buyPrice }}
                  </div>
                  <div v-else>--</div>
                </div>
              </tempalte>
            </stock-list-item>
            <stock-list-item
              prop="addDate"
              label="调入日期"
              sortable="true"
              label-width="2.2rem"
              label-align="right"
            >
              <tempalte v-slot="scope">
                <div class="table_in_template">
                  <div v-if="scope.addDate">
                    {{ scope.addDate }}
                  </div>
                  <div v-else>--</div>
                </div>
              </tempalte>
            </stock-list-item>

            <stock-list-item prop="nowPrice" label="现价" label-width="1.4rem" label-align="right">
              <tempalte v-slot="scope">
                <div class="table_in_template">
                  <div v-if="scope.upDownPercent > 0" class="up_data">
                    {{ scope.nowPrice }}
                  </div>
                  <div v-else-if="scope.nowPrice && Number(scope.nowPrice) === 0" class="zero_data">
                    {{ scope.nowPrice }}
                  </div>
                  <div v-else-if="scope.nowPrice === '' || scope.nowPrice === -9999">--</div>
                  <div v-else class="down_data">
                    {{ scope.nowPrice }}
                  </div>
                </div>
              </tempalte>
            </stock-list-item>
            <stock-list-item
              prop="upDownPercent"
              label="涨幅"
              label-width="1.4rem"
              label-align="right"
            >
              <tempalte v-slot="scope">
                <div class="table_in_template">
                  <div v-if="scope.upDownPercent > 0" class="up_data">
                    {{ scope.upDownPercent }}%
                  </div>
                  <div
                    v-else-if="scope.upDownPercent && Number(scope.upDownPercent) === 0"
                    class="zero_data"
                  >
                    {{ scope.upDownPercent }}%
                  </div>
                  <div v-else-if="!scope.upDownPercent || scope.upDownPercent === -9999">--</div>
                  <div v-else class="down_data">{{ scope.upDownPercent }}%</div>
                </div>
              </tempalte>
            </stock-list-item>
            <stock-list-item
              prop="highestProfit"
              label="最高涨幅"
              sortable="true"
              label-width="1.6rem"
              label-align="right"
            >
              <tempalte v-slot="scope">
                <div class="table_in_template">
                  <div v-if="scope.highestProfit > 0" class="up_data">
                    {{ scope.highestProfit }}%
                  </div>
                  <div
                    v-else-if="scope.highestProfit && Number(scope.highestProfit) === 0"
                    class="zero_data"
                  >
                    {{ parseFloat(scope.highestProfit).toFixed(2) }}%
                  </div>
                  <div v-else-if="!scope.highestProfit || scope.highestProfit === ''">--</div>
                  <div v-else class="down_data">{{ scope.highestProfit }}%</div>
                </div>
              </tempalte>
            </stock-list-item>
            <stock-list-item
              prop="rangeProfit"
              label="区间涨幅"
              sortable="true"
              label-width="1.8rem"
              label-align="right"
            >
              <tempalte v-slot="scope">
                <div class="table_in_template">
                  <div v-if="scope.rangeProfit > 0" class="up_data">{{ scope.rangeProfit }}%</div>
                  <div
                    v-else-if="scope.rangeProfit && Number(scope.rangeProfit) === 0"
                    class="zero_data"
                  >
                    {{ parseFloat(scope.rangeProfit).toFixed(2) }}%
                  </div>
                  <div v-else-if="!scope.rangeProfit || scope.rangeProfit === ''">--</div>
                  <div v-else class="down_data">{{ scope.rangeProfit }}%</div>
                </div>
              </tempalte>
            </stock-list-item>
            <stock-list-item
              prop="earnings"
              label="市盈率"
              label-width="1.8rem"
              label-align="right"
            >
              <tempalte v-slot="scope">
                <div class="table_in_template">
                  <div v-if="scope.earnings">{{ scope.earnings }}</div>
                  <div v-else>--</div>
                </div>
              </tempalte>
            </stock-list-item>
          </stock-list>
        </div>
      </div>
      <div class="page_btn_wrapper">
        <hxm-button @click="handleClick(1)" size="small" :disabled="lastDisabled"
          >上一页</hxm-button
        >
        <hxm-button @click="handleClick(2)" size="small" :disabled="nextDisabled"
          >下一页</hxm-button
        >
      </div>
    </div>
    <!-- 备选池 -->
    <div class="table_wrapper" v-if="isStaticData">
      <div class="industry_layout_tips">备选池</div>
      <div
        :class="detailTableData.length > 6 ? 'table_scroll_wrapper' : 'table_scroll_wrapper_auto'"
      >
        <TableProp :detailTableData="detailTableData" />
      </div>
    </div>
  </div>
</template>
<script>
import ActiveCP from './ActiveCP';
import NoData from './common/NoData';
import SubscribeTemplate from './common/SubscribeTemplate';
import TableProp from './common/TableProp';
import StaticDataProp from './StaticDataProp';
import {
  timestampToTime,
  redgreenhandler,
  jumpTokline,
  compare,
  webHQCommon,
  apiDataDeal,
  dealStaticData,
  spliceData,
  circleDate,
  debounce,
  throttle,
} from '../utils/index';
import configDataOptions from '../utils/dataOption';
import config from '../config/index';
import {
  GET_PROFIT_LINE,
  GET_HOT_PROFIT_LINE,
  GET_STATIC_DATA,
  GET_ALTERNATIVE_POOL,
  GET_SELECT_DATES,
  GET_STOCKS_TRACE,
  GET_SELECT_DATES_RE,
  GET_STOCKS_POOL,
  GET_STOCKS_POOL_RE,
  GET_NEW_ANALYSIS,
  GET_OPERATE_SUGGEST,
  GET_VALUE_STOCKS, //价值成长
  GET_VALUE_DATES,
  GET_QUERY_SUBSCRIBE, //强龙低吸、多头趋势 订阅查询
  GET_MODEL_THREE_QUERY, //热点轮动、深一度、小盘 订阅查询
  GET_MODEL_VALUE_QUERY, //价值成长
} from '@/apis';
export default {
  name: 'detail',
  data() {
    return {
      curId: 0,
      dataTipArr: ['近3月', '近1年', '创建以来'],
      isClose: false,
      list: [],
      optionData: [],
      detailTableData: [],
      tempArr: [],
      threeMonthArr: [],
      yearArr: [],
      staticData: [],
      query: {},
      getDataTemp: [],
      isShow: false,
      stockList: [], // 股票池
      dateList: [], //获取到的选股日期列表
      globalPushType: '',
      stockIdArr: [], //存个股id
      marketIdArr: [], //存个股marketid
      stocksId: [], //股池id
      stocksMarketId: [],
      isCalendar: false,
      calendarSelect: {
        type: Date,
        default: '',
      },
      isBlack: window.getCssStyle() === 'black',
      reloadDataLock: false,
      detailStockListTemp: [],
      lastStockList1: [],
      lastStockList2: [],
      showOtherMode: true,
      isStaticData: [2, 78, 202, 2072].includes(Number(this.$route.query.gpc_id)), //细分龙头、高管增持、强龙低吸、多头趋势
      isProfitLine: [2, 78, 202, 2072, 11].includes(Number(this.$route.query.gpc_id)),
      isGetDate: [11, 4, 6].includes(Number(this.$route.query.gpc_id)), //热点轮动、小盘成长、深一度IV
      isValueGrow: [734].includes(Number(this.$route.query.gpc_id)),
      isHotPool: [11].includes(Number(this.$route.query.gpc_id)),
      isModelTwo: [2072, 202].includes(Number(this.$route.query.gpc_id)), //强龙低吸、多头趋势
      visible: false,
      nowDate: {
        type: String,
        default: '',
      },
      dateMap: {},
      page: 1,
      pagesize: 10,
      hotDate: +new Date(),
      lastDisabled: true,
      nextDisabled: false,
      quarterDataTotal: {
        type: Number,
        default: 0,
      },
      lastPageLock: false,
      sortStr: 'buy_date',
      sortFlag: 'desc',
    };
  },
  components: {
    ActiveCP,
    NoData,
    SubscribeTemplate,
    StaticDataProp,
    TableProp,
  },
  watch: {
    optionData: {
      handler(newValue, oldValue) {
        if (newValue && this.isProfitLine) {
          configDataOptions.lineOption.data[0].originData = newValue;
        }
      },
      deep: true,
    },
    detailStockListTemp: {
      handler(newValue) {
        this.detailTableData = [];
        this.stockList = [];
        newValue.forEach((item, index) => {
          // 处理价值成长股票池
          if (this.isValueGrow && item.isStocks === 1) {
            this.detailTableData.push(item);
            return;
          }
          if (item.isStocks === 1) {
            this.detailTableData.push(item);
          } else {
            this.stockList.push(item);
          }
        });
      },
      deep: true,
    },
    calendarSelect: {
      handler(newValue) {
        if (newValue) {
          const query = {};
          query.pool_id = this.query.gpcId;
          query.date = newValue;
          this.getStockList(query);
          // AI多头趋势 股票池和备选池接口不是同一个
          this.getSocksData(query);
        }
      },
      deep: true,
    },
  },
  created() {
    // 小盘成长gpcID和高管增持gpcId冲突，所以用4做了转换
    this.query.gpcId = Number(this.$route.query.gpc_id) === 4 ? 2 : this.$route.query.gpc_id;
    this.getDates();
  },
  mounted() {
    // 获取收益数据
    this.getDealProfitData();
    // 备选池
    this.$pageStatus.loading();
  },
  methods: {
    async pickItem(value, index) {
      this.lastDisabled = true;
      this.nextDisabled = false;
      this.page = 1;
      this.pagesize = 10;
      this.nowDate = value;
      this.hotDate = this.dateMap[value];
      const res = await this.getHotStock(
        this.page,
        this.pagesize,
        this.hotDate,
        this.sortStr,
        this.sortFlag
      );
      this.quarterDataTotal = res.total;
      this.detailTableData = [];
      this.detailTableData = this.dealCPData(res.result, 1);
    },
    visibleHandle() {
      this.visible = true;
    },
    selectDate(arg) {
      if (arg) {
        this.calendarSelect = arg;
      }
    },
    async getHotStock(page, pagesize, date, sortitem, sortstr) {
      let params = {};
      params.date = date;
      params.sortitem = sortitem;
      params.sortstr = sortstr;
      params.page = page;
      params.pagesize = pagesize;
      try {
        const res = await GET_VALUE_STOCKS(params);
        if (Number(res.errorcode) === 0 && res.result) {
          return res;
        }
      } catch (error) {
        _t.errorReport({name:`OthersTemplate.vue组件中方法getHotStock错误。${error.name}`,message:`接口url：${_Global.api.valueDevStocks}，参数：${JSON.stringify(params)}。${error.message}`,stack:error.stack,category:'js'});
      }
    },
    async handleClick(type) {
      let res = [];
      // 获取总页数
      let totalPage = Math.ceil(this.quarterDataTotal / this.pagesize);
      // // 上一页
      if (type === 1) {
        this.nextDisabled = false;
        if (this.page > 1) {
          this.page--;
        } else if (this.page < 1) {
          this.lastDisabled = true;
          return;
        }
        if (!this.lastPageLock) {
          res = await this.getHotStock(
            this.page,
            this.pagesize,
            this.hotDate,
            this.sortStr,
            this.sortFlag
          );
        }
        if (this.page === 1 && res) {
          this.lastDisabled = true;
          this.lastPageLock = true;
          if (res.result) {
            this.detailTableData = this.dealCPData(res.result, 1);
          }
          return;
        }
        this.lastPageLock = false;
        this.detailTableData = await this.dealCPData(res.result, 1);
      }
      // 下一页
      if (type === 2) {
        this.lastDisabled = false;
        this.page++;
        if (this.page <= totalPage) {
          const res = await this.getHotStock(
            this.page,
            this.pagesize,
            this.hotDate,
            this.sortStr,
            this.sortFlag
          );
          if (res.result.length < 10) {
            this.nextDisabled = true;
          }
          if (this.page === 1 && res) {
            this.lastDisabled = true;
            this.lastPageLock = true;
            return;
          }
          this.lastPageLock = false;
          this.detailTableData = this.dealCPData(res.result, 1);
        } else {
          this.page--;
          this.nextDisabled = true;
        }
      }
    },
    // 价值成长股票池表头排序
    async watchHeadSort(arg1) {
      // 价值成长字段处理
      const status =
        this.isValueGrow &&
        (arg1.sortKey === 'stockCode' ||
          arg1.sortKey === 'status' ||
          arg1.sortKey === 'nowPrice' ||
          arg1.sortKey === 'upDownPercent' ||
          arg1.sortKey === 'earnings');
      if (status) {
        return; //股票名称/状态不排序
      }
      let res;
      let sortStr = '';
      if (arg1.sortKey === 'buyPrice') {
        sortStr = 'buy_price';
      } else if (arg1.sortKey === 'addDate') {
        sortStr = 'buy_date';
      } else if (arg1.sortKey === 'highestProfit') {
        sortStr = 'region_profit';
      } else if (arg1.sortKey === 'rangeProfit') {
        sortStr = 'amount_increase';
      }
      this.sortStr = sortStr;
      if (arg1.currentSortTag === 1) {
        this.sortFlag = 'asc';
        res = await this.getHotStock(
          this.page,
          this.pagesize,
          this.hotDate,
          sortStr,
          this.sortFlag
        );
      } else if (arg1.currentSortTag === 2) {
        this.sortFlag = 'desc';
        res = await this.getHotStock(
          this.page,
          this.pagesize,
          this.hotDate,
          sortStr,
          this.sortFlag
        );
      }
      if (res && res.result !== undefined) {
        this.detailTableData = this.dealCPData(res.result, 1);
      }
    },
    // 获取收益数据
    async getDealProfitData() {
      const query = {};
      try {
        query.pool_id = this.query.gpcId;
        query.parent_id = 0;
        let res;
        if (this.isHotPool) {
          res = await GET_HOT_PROFIT_LINE(query);
        } else {
          res = await GET_PROFIT_LINE(query);
        }
        if (Number(res.errorcode) === 0) {
          if (this.isHotPool) {
            this.getDataTemp = res.result.pool;
            this.dealAllData();
            return;
          }
          this.getDataTemp = res.result;
          this.dealAllData();
        }
      } catch (error) {
        _t.errorReport({name:`OthersTemplate.vue组件中方法getDealProfitData错误。${error.name}`,message:error.message,stack:error.stack,category:'js'});
      }
    },
    // 获取股池静态数据
    async getStaticData() {
      const query = {};
      try {
        query.pool_id = this.query.gpcId;
        const res = await GET_STATIC_DATA(query);
        if (Number(res.errorcode) === 0) {
          this.staticData = dealStaticData(res.result.layout, this.query.gpcId, 'others');
        }
      } catch (error) {
        _t.errorReport({name:`OthersTemplate.vue组件中方法getStaticData错误。${error.name}`,message:`接口url：${_Global.api.stocksStaticData}，参数：${JSON.stringify(query)}。${error.message}`,stack:error.stack,category:'js'});
      }
    },
    //页面数据
    dealAllData() {
      if (this.getDataTemp.length === 0) return;
      this.staticData = [];
      this.dealProfitData();
      if (this.isStaticData) {
        this.getStaticData();
      } else {
        // 股池描述
        this.staticData['cpDescribe'] =
          config.detailStocksDescribe[this.query.gpcId === 2 ? 4 : this.query.gpcId];
      }
    },
    // 收益曲线数据处理
    dealProfitData() {
      this.getDataTemp.forEach(item => {
        const tempObj = this.isHotPool
          ? {
              date: item.date.split('-').join(''),
              self: item.increase / 100,
              szzs: item.sse_increase / 100,
            }
          : {
              date: item.add_date.split('-').join(''),
              self: item.template_yield / 100,
              szzs: item.sse_increase / 100,
            };

        this.optionData.push(tempObj);
      });
      this.optionData.sort(compare('date'));
      this.tempArr = [];
      // 数组暂存要切换的数据
      this.tempArr = this.optionData;
      this.threeMonthArr = spliceData(3, this.tempArr);
      this.yearArr = spliceData(12, this.tempArr);
      this.optionData = this.threeMonthArr;
      this.$pageStatus.close();
    },
    // 获取所有订阅的股池和股票列表
    async getAllStocks() {
      const params = {};
      params.type = 3;
      params.version = getParam('product') === 'jtzz' ? 2 : 1;
      params.data = true;
      const res = await GET_SUB(params);
      if (Number(res.errorcode) === 0) {
        res.data.forEach((item, index) => {
          this.globalPushType = item.push_type.join(',');
        });
      }
    },
    // 强龙低吸、多头趋势、细分龙头、高管增持股池获取日期
    async getDates() {
      const query = {};
      let res;
      try {
        query.pool_id = this.query.gpcId;
        if (!this.isGetDate) {
          res = await GET_SELECT_DATES(query);
        } else {
          // 热点轮动/小盘成长/深一度IV 通过这个接口获取
          query.clientid = getParam('product');
          res = await GET_SELECT_DATES_RE(query);
        }
        // 价值成长描述
        if (this.isValueGrow) {
          this.staticData['cpDescribe'] = config.detailStocksDescribe[this.query.gpcId];
          res = await GET_VALUE_DATES();
        }
        if (Number(res.errorcode) === 0 && res.result) {
          let dateList = [];
          if (Number(this.query.gpcId) !== 734) {
            res.result.reverse();
            this.dateList = res.result;
          } else {
            res.result.forEach((item, index) => {
              this.dateMap[circleDate(item)] = item;
              dateList.push(circleDate(item));
            });
            this.dateList = dateList;
          }
  
          this.nowDate = this.dateList[0];
          const query = {};
          query.pool_id = this.query.gpcId;
          query.date = this.dateList[this.dateList.length - 1];
          // 价值成长
          if (this.isValueGrow) {
            let params = {};
            params.date = this.dateMap[this.dateList[0]];
            this.hotDate = this.dateMap[this.dateList[0]];
            params.sortitem = this.sortStr;
            params.sortstr = 'desc';
            params.page = this.page;
            params.pagesize = this.pagesize;
            const res = await GET_VALUE_STOCKS(params);
            this.quarterDataTotal = res.total;
            this.detailTableData = this.dealCPData(res.result, 1);
            if (this.page === 1 && res) {
              this.lastPageLock = true;
            }
            this.$pageStatus.close();
            return;
          }
          // 股票池
          this.getStockList(query);
          if (this.query.gpcId === 2) {
            this.staticData['cpDescribe'] =
              config.detailStocksDescribe[this.query.gpcId === 2 ? 4 : this.query.gpcId];
          }
  
          // 备选池
          this.getSocksData(query);
        }
      } catch (error) {
        _t.errorReport({name:`OthersTemplate.vue组件中方法getDates错误。${error.name}`,message:error.message,stack:error.stack,category:'js'});
      }
    },
    // 股票池个股订阅信息
    async getStockTrace(query, arr) {
      const params = {};
      params.gpcId = query.gpcId;
      params.stockCode = query.stockCode;
      params.stockId = query.stockId;
      try {
        const res = await GET_STOCKS_TRACE(params);
        if (Number(res.code) === 0 && res.data) {
          let tempStocks = [];
          tempStocks.push(arr);
          // 组装跟踪说明
          res.data.forEach((item, index) => {
            if (item.longMsg && !item.shortMsg) {
              item.shortMsg = item.longMsg;
              item.longMsg = '';
            }
            // 日期+短信说明
            item.shortMsg = item.shortMsg ? item.basicDate.split(' ')[0] + ' ' + item.shortMsg : '';
          });
          //获取到的提醒列表 （反转一下）
          tempStocks[0]['subscribeList'] = res.data.reverse();
          return tempStocks[0];
        }
      } catch (error) {
        _t.errorReport({name:`OthersTemplate.vue组件中方法getStockTrace错误。${error.name}`,message:`接口url：${_Global.api.stockTrace}，参数：${JSON.stringify(params)}。${error.message}`,stack:error.stack,category:'js'});
      }
    },
    // 切换曲线图
    setSelect(index) {
      this.curId = index;
      this.optionData = [];
      if (index === 0) {
        //近3个月的数据处理
        this.optionData = this.threeMonthArr;
      } else if (index === 1) {
        // 近1年
        this.optionData = this.yearArr;
      } else {
        //创建以来
        this.optionData = this.tempArr;
      }
    },
    //到历史页
    toHistoryPage() {
      let gpc_id = this.query.gpcId === 2 ? 4 : this.query.gpcId;
      location.href = `${config.toNewPage}history?gpc_id=${gpc_id}&product=${getParam('product')}`;
    },
    // 展开或关闭开关
    colseSwitch() {
      this.isClose = !this.isClose;
    },
    //操作建议处理规则
    async getSuggest(query, arr) {
      try {
        const res = await GET_OPERATE_SUGGEST(query);
        if (Number(res.errorcode) === 0) {
          let tempStocks = [];
          let tempArr = {};
          tempStocks.push(arr);
          res.result.forEach((item, index) => {
            if (item.content && item.content.includes('<p>') && item.content.slice(0, 3) === '<p>') {
              return;
            }
            if (item.content && item.content.includes('买入')) {
              tempArr['buy_tips'] = `${item.ctime.split(' ')[0]} ${item.content}`;
            } else if (item.content && item.content.includes('卖出')) {
              tempArr['sell_tips'] = `${item.ctime.split(' ')[0]} ${item.content}`;
            }
            if (!item.content && item.sms_content) {
              if (item.sms_content.includes('止盈')) {
                tempArr['buy_tips'] = `${item.ctime.split(' ')[0]} ${item.sms_content}`;
              } else if (item.sms_content.includes('止损')) {
                tempArr['sell_tips'] = `${item.ctime.split(' ')[0]} ${item.sms_content}`;
              }
            }
            tempStocks[0]['buy_tips'] = tempArr['buy_tips'];
            tempStocks[0]['sell_tips'] = tempArr['sell_tips'];
          });
          const analysisRes = await GET_NEW_ANALYSIS(query);
          const opsuggestArr = analysisRes.result.opsuggest[query.stock];
          if (!opsuggestArr) {
            return;
          }
          tempStocks[0]['jbm'] = opsuggestArr[0];
          tempStocks[0]['jsm'] = opsuggestArr[1];
          tempStocks[0]['xxm'] = opsuggestArr[2];
          return tempStocks[0];
        }
      } catch (error) {
        _t.errorReport({name:`OthersTemplate.vue组件中方法getSuggest错误。${error.name}`,message:`接口url：${_Global.api.operationSuggest}，参数：${JSON.stringify(query)}。${error.message}`,stack:error.stack,category:'js'});
      }
    },
    // 股票池
    async getStockList(query) {
      if (!window.getAppVersion()) return;
      let res;
      const tempArr = [];
      try {
        if (!this.isGetDate) {
          res = await GET_STOCKS_POOL(query);
        } else {
          this.staticData = [];
          this.staticData['cpDescribe'] = config.detailStocksDescribe[this.query.gpcId];
          // 热点轮动/小盘成长/深一度IV 通过这个接口获取股票池
          query.clientid = getParam('product');
          res = await GET_STOCKS_POOL_RE(query);
        }
        if (Number(res.errorcode) === 0 && res.result) {
          this.$pageStatus.close();
          // 得到股票池数据之后，根据stockCode gpcId stockId 来查询对应的跟踪信息  subscribeList
          const results = res.result;
          this.stockList = this.dealCPData(results, 2);
          if (this.isGetDate) {
            results.forEach((item, index) => {
              query.stock = item.stock_code;
              tempArr.push(
                new Promise(resolve => {
                  return resolve(this.getSuggest(query, item));
                })
              );
            });
  
            // 再将所有的值取出来
            let stockList;
            Promise.all(tempArr).then(res => {
              if (!res[0]) {
                return;
              }
              stockList = this.dealCPData(res, 2);
              this.stockList = stockList;
              this.$pageStatus.close();
            });
          }
        }
      } catch (error) {
        _t.errorReport({name:`OthensTemplate.vue组件中方法getStockList错误。${error.name}`,message:error.message,stack:error.stack,category:'js'});
      }
    },
    // 获取备选池列表
    async getSocksData(arr) {
      const query = {};
      try {
        query.pool_id = this.query.gpcId;
        query.parent_id = 0;
        query.date = arr.date;
        query.limit = 10;
        const res = await GET_ALTERNATIVE_POOL(query);
        this.staticData['cpDescribe'] = config.detailStocksDescribe[this.query.gpcId];
        if (Number(res.errorcode) === 0) {
          if (!res.result.length) {
            return;
          }
          this.detailTableData = this.dealCPData(res.result, 1);
          // 默认买入价格排序 反转
          this.detailTableData.sort(compare('buyDateSort')).reverse();
          return;
        }
      } catch (error) {
        _t.errorReport({name:`OthersTemplate.vue组件中方法getSocksData错误。${error.name}`,message:`接口url：${_Global.api.alternativePool}，参数：${JSON.stringify(query)}。${error.message}`,stack:error.stack,category:'js'});
      }
      this.$pageStatus.fail(() => {
        this.getDates();
        this.getAllStocks();
        this.$toast('刷新成功');
        this.getDealProfitData();
        this.getSocksData();
      });
    },
    // 接口数据标准化处理，根据type获取stockId和marketId
    dealCPData(arr, type) {
      if (!arr.length && !arr[0]) {
        return;
      }
      let detailStockList = [];
      if (!window.getAppVersion()) return;
      if (arr === undefined || arr.length === 0) return [];
      // 股池列表置空
      if (type === 2) {
        this.lastStockList2 = [];
      } else if (type === 1) {
        this.lastStockList1 = []; // 备选池
      }
      arr.forEach(item => {
        if (!item) {
          return;
        }
        this.stockIdArr.push(item.stock_code);
        this.marketIdArr.push(item.market);
        if (type === 2) {
          this.lastStockList2.push(apiDataDeal(item, null, true, 2, false));
        } else {
          this.lastStockList1.push(apiDataDeal(item, null, true, 1, false));
        }
        detailStockList.push(apiDataDeal(item, null, true));
      });
      // 备选池
      this.detailStockListTemp = [];
      if (this.lastStockList1.length) {
        this.detailStockListTemp = this.lastStockList1;
      }
      //股池
      if (this.lastStockList2.length) {
        this.detailStockListTemp = this.detailStockListTemp.concat(this.lastStockList2);
      }
      // 客户端协议获取实时行情数据
      webHQCommon(this.stockIdArr, this.marketIdArr, this.detailStockListTemp, list => {
        this.detailStockListTemp = list;
      });
      return detailStockList;
    },
    //子组件传来的值
    isShowChange(arr) {
      this.isShow = arr.showStatus;
      this.btnGray = arr.setGray;
    },
    //获取点击table的row 跳k线详情页
    watchClickRow(row) {
      jumpTokline(row.stockCode, row.market);
    },
  },
};
</script>
<style lang="less" scoped>
.detail_wapper {
  width: 7.4rem;
  height: auto;
  margin: 0 auto;
}
.calendar_prop {
  position: absolute;
  right: 0.2rem;
  top: -0.3rem;
}
.calendar_prop_re {
  position: absolute;
  right: 0.2rem;
  width: 36%;
  top: 0.1rem;
  font-size: 0.3rem;
  padding: 0.1rem 0.16rem 0.1rem 0.16rem;
  border-radius: 0.1rem;
  background-color: #f6f6f6;
  span {
    margin-left: 0.1rem;
    padding: 0.05rem 0.08rem 0.05rem 0.08rem;
    border-radius: 0.1rem;
  }
}
[theme-mode='black'] .calendar_prop_re {
  position: absolute;
  right: 0.2rem;
  width: 36%;
  top: 0.1rem;
  font-size: 0.3rem;
  padding: 0.1rem 0.16rem 0.1rem 0.16rem;
  border-radius: 0.1rem;
  background-color: #1a1a1a;
  color: #d2d2d3;
}
.value_grow_content {
  display: flex;
  align-items: center;
}
.fade-in {
  opacity: 1;
  max-height: 8.8rem;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.fade-out {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.chart_line {
  width: 7rem;
  height: 4rem;
}
.cp_desc {
  height: auto;
  background-color: #ffffff;
  padding-bottom: 5%;
  .close_and_up {
    padding: 2% 3.2%;
    display: flex;
    align-items: center;
    color: #999999;
    font-size: 0.24rem;
    justify-content: space-between;
    text-align: center;
  }
  .close_and_up_span {
    font-weight: bold;
    color: #323232;
    font-size: 0.36rem;
  }
  .close_and_up span:nth-child(2) {
    font-size: 0.26rem;
  }
  .close_and_up span img {
    pointer-events: none;
    width: 0.32rem;
    height: 0.25rem;
    margin-bottom: 0.07rem;
  }
  .cp_desc_content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.24rem;
    color: #666666;
    letter-spacing: 0;
    text-align: justify;
    padding: 2% 3.2% 0 3.2%;
  }
  .cp_desc_content_open {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    font-size: 0.3rem;
    color: #666666;
    letter-spacing: 0;
    line-height: 0.4rem;
    text-align: justify;
    padding: 2% 3.2% 0 3.2%;
    border-top: 0.01rem solid #eeeeee;
  }
}

[theme-mode='black'] .cp_desc {
  height: auto;
  background-color: #121212;
  padding-bottom: 5%;
  .close_and_up {
    padding: 2% 3.2%;
    display: flex;
    align-items: center;
    color: #999999;
    font-size: 0.24rem;
    justify-content: space-between;
    text-align: center;
  }
  .close_and_up_span {
    font-weight: bold;
    color: #d2d2d3;
    font-size: 0.36rem;
  }
  .close_and_up span:nth-child(2) {
    font-size: 0.26rem;
  }
  .close_and_up span img {
    pointer-events: none;
    width: 0.32rem;
    height: 0.25rem;
  }
  .cp_desc_content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.24rem;
    color: #666666;
    letter-spacing: 0;
    text-align: justify;
    padding: 2% 3.2% 0 3.2%;
  }
  .cp_desc_content_open {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    font-size: 0.3rem;
    color: #d2d2d3;
    letter-spacing: 0;
    text-align: justify;
    line-height: 0.4rem;
    padding: 2% 3.2% 0 3.2%;
    border-top: 0.01rem solid #222222;
  }
}
.income_analyse_wrapper {
  width: 96%;
  margin: 0 auto;
  background-color: #fff;
  .income_analyse_curve {
    width: 100%;
    height: 3.84rem;
    margin-top: 0.28rem;
  }
}
[theme-mode='black'] .income_analyse_wrapper {
  width: 96%;
  margin: 0 auto;
  background-color: #121212;
  .income_analyse_curve {
    width: 100%;
    height: 3.84rem;
  }
}
.income_analyse_curve_change_tab_wrapper {
  margin-top: 0.45rem;
}
.income_analyse_curve_change_tab {
  width: 6.8rem;
  height: 0.7rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  border: 1px solid #dddddd;
  border-radius: 4px;
  font-size: 0.26rem;
  color: #666666;
  line-height: 0.7rem;
  div {
    height: 0.7rem;
    width: 2.7rem;
  }
  .isSelect {
    border-radius: 4px;
    color: #ffffff;
    background-color: #e93030;
    height: 0.7rem;
    width: 2.7rem;
  }
}
[theme-mode='black'] .income_analyse_curve_change_tab {
  width: 6.8rem;
  height: 0.7rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  border-radius: 4px;
  font-size: 0.26rem;
  color: #323232;
  border: 1px solid #323232;
  line-height: 0.7rem;
  div {
    height: 0.7rem;
    width: 2.7rem;
  }
  .isSelect {
    border-radius: 4px;
    background-color: #fd4332;
    color: #d2d2d3;
    height: 0.7rem;
    width: 2.7rem;
  }
}
.cp_chi_cang {
  width: 100%;
  margin-top: 0.2rem;
  background-color: #ffffff;
  padding-bottom: 0.2rem;
  position: relative;
  .tp_chi_cang_history {
    padding: 2% 3.2%;
    padding-top: 0.1rem;
    color: #323232;
    font-size: 0.36rem;
    border-bottom: 0.01rem solid #eeeeee;
    box-shadow: inset 0 0 0 0 #eeeeee;
    div:nth-child(1) {
      font-weight: bold;
      width: 50%;
      text-align: left;
      margin-right: 5%;
    }
  }
}
.to_history {
  padding: 2%;
  div:nth-child(1) {
    font-size: 0.28rem;
    color: #666666;
    width: 100%;
    text-align: center;
  }
  div img {
    pointer-events: none;
    width: 0.32rem;
    height: 0.3rem;
    margin-bottom: 0.02rem;
  }
}
.table_wrapper {
  position: relative;
  padding: 0.2rem 0.26rem;
  margin-top: 0.2rem;
  background-color: #ffffff;
}
[theme-mode='black'] .table_wrapper {
  position: relative;
  padding: 0.2rem 0.26rem;
  margin-top: 0.2rem;
  background-color: #121212;
}
.table_scroll_wrapper {
  height: 5.6rem;
  overflow-x: hidden;
  overflow-y: scroll;
}
.table_scroll_wrapper_auto {
  height: auto;
  overflow-x: hidden;
}
::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
[theme-mode='black'] .cp_chi_cang {
  width: 100%;
  background-color: #121212;
  position: relative;
  .tp_chi_cang_history {
    padding: 2% 3.2%;
    text-align: center;
    padding-top: 0.1rem;
    color: #d2d2d3;
    font-size: 0.36rem;
    border-bottom: 0.01rem solid #1a1a1a;
    box-shadow: inset 0 0 0 0 #1a1a1a;
    div:nth-child(1) {
      font-weight: bold;
      width: 50%;
      text-align: left;
      margin-right: 5%;
    }
    div:nth-child(2) {
      color: #8e8e8e;
      font-size: 0.26rem;
      width: 24%;
      text-align: center;
    }
    div img {
      pointer-events: none;
      width: 0.32rem;
      height: 0.3rem;
    }
  }
}
.page_btn_wrapper {
  display: flex;
  align-content: center;
  justify-content: center;
  justify-content: space-between;
  text-align: center;
  margin: 0.4rem 12% 0.2rem 12%;
}
.chart_line /deep/ .d3charts-tooltip {
  z-index: 1999 !important;
}
</style>
